<template>
  <section>
    <ul>
      <li
        class="todo-item"
        v-for="(item, index) in nowList"
        :key="item + index"
      >
        <span>{{ index + 1 }}.</span>
        <p>{{ item.name }}</p>
        <button @click="removeItem(index)">完成</button>
      </li>
    </ul>
    <div class="state">
      <div class="nocomplete" @click="noComplete">未完成</div>
      <div class="complete" @click="complete">已完成</div>
    </div>
    <div class="todo-none" v-show="list.length === 0">
      还没有数据，请及时添加
    </div>
  </section>
</template>
<script>
export default {
  props: {
    list: { type: Array },
    completeList: { type: Array },
  },
  data() {
    return {
      nowList: this.list,
    };
  },
  methods: {
    removeItem(index) {
      this.$emit("removeItem", index);
    },
    noComplete() {
      this.nowList = this.list;
    },
    complete() {
      this.nowList = this.completeList;
    },
  },
};
</script>

<style>
.state {
  display: flex;
  height: 80px;
  justify-content: space-around;
  align-items: center;
}

.state div {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  background-color: #409eff;
}
</style>
